<!doctype html>
<html lang="en">

<head>
	<title>鑫洋泉运营管理平台</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../assets/vendor/linearicons/style.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="../assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
	<link rel="stylesheet" href="../assets/css/map1119.css"/>
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">
	<script src="http://webapi.amap.com/maps?v=1.3&key=cba4b402fa99f77f698ff478bf0ade45&plugin=AMap.MarkerClusterer"></script>
    <!-- <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> -->
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<nav class="navbar navbar-default navbar-fixed-top">

			<h1 class="header_1">
				 鑫洋泉运营管理系统 
			</h1>
		</nav>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="sidebar-scroll">
				<nav>
					<ul class="nav">
						<li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>首页</span></a></li>
						<li><a href="device.html" class=""><i class="lnr lnr-chart-bars"></i> <span>车辆信息</span></a></li>
                        <li><a href="custom.html" class=""><i class="lnr lnr-chart-bars"></i> <span>客户信息</span></a></li>
                         
                        <li>
                            <a href="cardsStatistics.html"><i class="lnr lnr-chart-bars"></i> <span>SIM卡管理</span></a>
                            <ul class="nav cardsInfoList">
                                <li><a href="cardsStatistics.html">统计信息</a></li>
                                <li><a href="cardsList.html">列表信息</a></li>
                            </ul>
                        </li>
						<li>
							<a href="config.html"><i class="lnr lnr-chart-bars"></i> <span>配置管理</span></a>
							<ul class="nav">
								<li><a href="config.html" class=""><span>默认配置列表</span></a></li>
								<li><a href="parameters.html?1" class=""><span>解码类型</span></a></li>
								<li><a href="parameters.html?2" class=""><span>主机盒界面</span></a></li>
								<li><a href="parameters.html?3" class=""><span>前景和前后视角</span></a></li>
								<li><a href="parameters.html?4" class=""><span>转向视角</span></a></li>
								<li><a href="parameters.html?5" class=""><span>轨迹线类型</span></a></li>
						
							</ul>
						</li>
						<!--<li><a href="device_detail.html" class=""><i class="lnr lnr-cog"></i> <span>设备详情</span></a></li>-->
					</ul>
				</nav>
			</div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<!--<h3 class="page-title">Charts</h3>-->
                    <div class="row">
						<div class="col-md-12">
							<!-- BORDERED TABLE -->
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">统计信息</h3>
								</div>
								<div class="panel-body">
									<table class="table text-center table-striped">
										<thead>
											<tr>
												<th class="text-center">已激活设备数</th>
												<th class="text-center">当前在线车辆数</th>
												<th class="text-center">失联设备数</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td id ='activateStat'></td>
												<td id='onLineCount'></td>
												<td id='offLineCount'></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- END BORDERED TABLE -->
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">设备增长趋势图</h3>
								</div>
								<div class="panel-body">
									<div id="demo-line-chart" class="ct-chart devices_line_chart" style="height:500px"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<!-- 全部设备分布情况 -->
						<div class="col-md-12">
							<div class="panel">
								<div class="panel-heading">
									<h3 class="panel-title">
										<select id="mapId" onChange="changeMap()" class="form-control">
											<option value="0" selected>设备首次上数位置全国分布情况</option>
											<option value="1">在线设备全国分布情况</option>
											<option value="2">离线设备全国分布情况</option>
										</select>
									</h3>
								</div>
								<div class="panel-body" style="height:530px;">
                                   
									<div id="container"></div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<footer>
			<div class="container-fluid">
			</div>
		</footer>
	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	<script src="../assets/vendor/jquery/jquery.min.js"></script>
	<script src="../assets/vendor/echarts/echarts.js"></script>
	<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="../assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
	<script src="../assets/scripts/klorofil-common.js"></script>
	<script src="../assets/vendor/china.js"></script>
	<script>
	var basePath = '/oss-ws/ws/0.1/';
	</script>
	<script>

		function getlongToDate(date) {
			var now = new Date(date);
			return [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
		}

		$.get(basePath + 'stat/activate', function (data) {
			var xAxisData = [];
			var seriesBarData = [];
			var serieslineData = [];

			for(var i = 0; i < data.length; i++) {
				var item = data[i];
				xAxisData.push(getlongToDate(item.time));
				seriesBarData.push(item.totalCount);
				serieslineData.push(item.addCount);
			}
			lineOption = {
				color: ['#3398DB'],
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
			            type : 'category',
			            data : xAxisData,
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'设备数',
			            type:'bar',
			            barWidth: '45%',
			            data:seriesBarData
			        },
			        {
			            name:'增长量',
			            type:'line',
			            itemStyle : {  
                            normal : {  
                                lineStyle:{  
                                    color:'#c23531'  
                                }  
                            }  
                        },  
			            data:serieslineData,
			        }
			    ]
			};

			var lineChart = echarts.init(document.getElementById('demo-line-chart'));
			if (lineOption && typeof lineOption === "object") {
				lineChart.setOption(lineOption, true);
			}

		})

		$.get(basePath + 'stat/data', function (data) {
			//data['offLineCount']
			//data['onLineCount']
			//data['activateStat']
			$('#offLineCount')[0].innerHTML = data['offLineCount'];
			$('#onLineCount')[0].innerHTML = data['onLineCount'];
			$('#activateStat')[0].innerHTML = data['activateStat'];
			
		})
		//line
		
		
		var cluster, markers = [];
		//全国设备
		var allMap = new AMap.Map("container", {
			resizeEnable: true,
			center:[105,34],
			zoom: 4
		});

		var refreshMap = function (url) {
			markers=[];
			$.get(url, function (myData) {
				var points  = myData['data'];	
				for(var i=0;i<points.length;i+=1){
					markers.push(new AMap.Marker({
					position:points[i]['lnglat'],
					content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
						offset: new AMap.Pixel(-15,-15)
					}))
				}
				var count  = markers.length;
				var _renderCluserMarker = function (context) {
					var factor = Math.pow(context.count/count,1/18)
					var div = document.createElement('div');
					var Hue = 180 - factor* 180;
					var bgColor = 'hsla('+Hue+',100%,50%,0.7)';
					var fontColor = 'hsla('+Hue+',100%,20%,1)';
					var borderColor = 'hsla('+Hue+',100%,40%,1)';
					var shadowColor = 'hsla('+Hue+',100%,50%,1)';
					div.style.backgroundColor = bgColor
					var size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
					div.style.width = div.style.height = size+'px';
					div.style.border = 'solid 1px '+ borderColor;
					div.style.borderRadius = size/2 + 'px';
					div.style.boxShadow = '0 0 1px '+ shadowColor;
					div.innerHTML = context.count;
					div.style.lineHeight = size+'px';
					div.style.color = fontColor;
					div.style.fontSize = '14px';
					div.style.textAlign = 'center';
					context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
					context.marker.setContent(div)
				}
				addCluster(0);
				
			});
		}

		var changeMap = function () {
			var mapId = $("#mapId").val();

			switch (mapId) {
				case "0":
					url = basePath + 'stat/map/first'
					break;
				case "1":
					url = basePath + 'stat/map/online'
					break;
				case "2":
					url = basePath + 'stat/map/offline'
					break;
			}
			refreshMap(url);
		}
		refreshMap(basePath + 'stat/map/first');

		//map
		function addCluster(tag) {
			if (cluster) {
				cluster.setMap(null);
			}
			if (tag == 2) {//完全自定义
				cluster = new AMap.MarkerClusterer(allMap,markers,{
					gridSize:80,
					renderCluserMarker:_renderCluserMarker
				});
			} else if (tag == 1) {//自定义图标
				var sts = [{
					url: "http://a.amap.com/jsapi_demos/static/images/blue.png",
					size: new AMap.Size(32, 32),
					offset: new AMap.Pixel(-16, -16)
				}, {
					url: "http://a.amap.com/jsapi_demos/static/images/green.png",
					size: new AMap.Size(32, 32),
					offset: new AMap.Pixel(-16, -16)
				}, {
					url: "http://a.amap.com/jsapi_demos/static/images/orange.png",
					size: new AMap.Size(36, 36),
					offset: new AMap.Pixel(-18, -18)
				},{
					url: "http://a.amap.com/jsapi_demos/static/images/red.png",
					size: new AMap.Size(48, 48),
					offset: new AMap.Pixel(-24, -24)
				},{
					url: "http://a.amap.com/jsapi_demos/static/images/darkRed.png",
					size: new AMap.Size(48, 48),
					offset: new AMap.Pixel(-24, -24)
				}];
				cluster = new AMap.MarkerClusterer(allMap, markers, {
					styles: sts,
					gridSize:80
				});
			} else {//默认样式
				cluster = new AMap.MarkerClusterer(allMap, markers,{gridSize:80});
			}
		}
	</script>
</body>

</html>
